<!--
 * @Author: [kangjie]
 * @Date: 2022-04-07 09:57:00
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-04-07 10:29:43
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/vue-2.6.12.js"></script>
  <script src="./js/vuex-3.5.1.js"></script>
</head>
<body>
  <div id="app">
    <!-- 如何访问状态机的数据 -->
    {{$store.state.storeMsg}}
    ---------------------------------
    {{$store.getters.storeMsgUpper}}
    <button @click="$store.commit('changeMsg','test')">提交突变</button>
    <button @click="$store.dispatch('getMsg','terry')">分发动作</button>
  </div>
  <script>
    // 生成仓库/状态机 配置对象
    let storeCnf={
      // 管理组件状态 维护的是公共数据
      state:{
        storeMsg:'状态机中的数据hello'
      },
      getters:{
        // 派生自state  对state的数据处理之后再返回 类似于computed
        storeMsgUpper(state){ //state是默认参数
          return state.storeMsg.toUpperCase()
        }
      },
      // 突变 唯一修改state中数据的一种方式
      mutations:{
        changeMsg(state,payload){
          state.storeMsg = payload
        }
      },
      // 动作 发送异步请求
      actions:{
        // sto类状态机对象 
        getMsg({commit,dispatch,state,getters},payload){
          // console.log(sto);
          // 提交突变 
          // 发生异步请求
          // let res=[];
          //提交突变
          // sto.commit('突变事件名称','传递的数据res');
          // sto.commit('changeMsg',payload);
          commit('changeMsg',payload);
        }
      }
    };
    // 2.生成一个Vuex Store构造函数的状态机
    let store=new Vuex.Store(storeCnf);
    // 3.注册状态机 /仓库
    new Vue({
      el:"#app",
      // 注册仓库
      store,
      data:{
        
      },
      created(){
        console.log(this.$store.state,'调用vuex中数据');
        console.log(this.$store.getters,'调用vuex中数据');
        // console.log(this.$store.mutations,'1111');
        // console.log(this.$store.actions,'2222');
      },
      methods:{

      }
    })
  </script>
</body>
</html>